/**
 * #info
 *
 *@author   wuwg
 *@createTime   2018/06/06
 *@updateTime   2018/06/06
 *@description  show-more  component 展示更多组件,内容实际高度少于默认高度时，不再显示加载更多的部分
 */

/**
 * #item
 *
 * @type         aty-show-more
 * @cn          展示更多
 * @menu        其他
 * @stPlugin    true
 * @stContainer true
 */
import config from '../../../config/config.js'

// module
import icon from '../../basic/icon/index.vue'
// prefix
const prefixCls = config.prefix + '-show-more'
// module
const module = {
  name: prefixCls,
  components: { icon },
  props: {
    /**
     * #property
     *
     * @name     name
     * @cn      该show-more组件对应的名称
     * @type    string
     * @description   该show-more组件对应的名称，页面多出用到show-more组件，可以用name进行区分
     */
    name: {
      type: null
    },
    /**
     * #property
     *
     * @name    border
     * @cn      是否显示边框
     * @type    boolean
     * @value   false
     * @description 是否显示边框，建议在灰色背景下使用
     */
    border: {
      type: Boolean,
      default: false
    },
    /**
     * #property
     *
     * @name    defaultHeight
     * @cn      默认展示的高
     * @type    number
     * @value    30
     * @description  默认展示的高
     */
    defaultHeight: {
      type: Number,
      default: 30
    }
  },
  data () {
    return {
      // 内容的高
      contentHeight: 'auto',
      // 是否自动展开
      expand: false,
      // 内容容器的的高度
      height: this.defaultHeight + 'px',
      // 是否显示trigger
      showTrigger: false
    }
  },
  watch: {},
  computed: {
    classes () {
      return [
                `${prefixCls}`,
                this.border ? 'border' : ''
      ]
    },
    bodyClasses () {
      return `${prefixCls}-body`
    },
    operateClasses () {
      return [
                `${prefixCls}-trigger`,
                this.expand ? 'extend' : ''
      ]
    },
    bodyStyles () {
      return {
        height: this.height
      }
    },
    iconType () {
      return 'ios-arrow-down'
    }
  },
  methods: {
    // 计算内容的高
    countContentHeight () {
      this.contentHeight = this.$refs.bodyIn.offsetHeight
      if (this.contentHeight > this.defaultHeight) {
        // 显示触发元素
        this.showTrigger = true
      } else {
        this.showTrigger = false
      }
    },
    // 更新组件
    update () {
      this.countContentHeight()
      this.setHeight()
    },
    setHeight () {
      // 设置高
      if (this.expand) {
        this.height = this.contentHeight + 'px'
      } else { // 实际内容高度小于默认高度时，以实际内容高度为主
        this.height = this[this.contentHeight > this.defaultHeight ? 'defaultHeight' : 'contentHeight'] + 'px'
      }
    },
    /**
     * #method
     *
     * @name    clickToggle
     * @description  切换更多的展开收起状态
     */
    // 显示隐藏
    clickToggle () {
      // 切换展开收起
      this.expand = !this.expand
      // 设置高度
      this.setHeight()
      /**
       * #event
       *
       * @name    toggle
       * @param   expand       当前的expand值
       * @body    console.log("toggle")
       * @description      点击展开/收起时触发
       */
      this.$emit('toggle', this.expand)
    }
  },
  updated () {
  },
  created () {
  },
  mounted () {
    // 默认计算一次
    this.update()
    /**
     * #event
     *
     * @name    ready
     * @param   _this       当前this对象
     * @body    console.log("ready");
     * @description      dom插入页面收触发
     */
    this.$emit('ready', this)
  }
}
export default module
